<template>
<!-- 新闻动态 -->
<div style="text-align: center;">
  <h1>行业新闻</h1>
  <span class="borderLine"></span>
  <div class="container">
    <div class="left">
      <div class="up" v-animate="'queue-bottom'">
        <img src="@/assets/images/aboutTwo/pic1.png" alt="">
        <h4>劳动仲裁需要多久</h4>
        <p>一旦员工与公司之间的劳动线纷无法调解了。就会选择前往劳动仲裁机构进行相文的劳动忡裁申清,从而来解决自己的劳动到纷，国此虫唯护白己的权益不被侵犯...</p>
<!--        <button>查看详情</button>-->
      </div >
      <div class="dowm" v-animate="'queue-bottom'">
        <h4>合同纠纷的两大原因</h4>
        <p>合同是双方协商的结果。既然双方当事人是在白愿、平等的基础上订立合同的，那么按照合同履行义务的问题应该是毫无疑问的..</p>
      </div>
    </div>
    <div class="center" >
      <div class="up" v-animate="'queue-bottom'">
        <h4>合同纠纷怎么解决</h4>
        <p>如果合同展行发生困雕、受到挫折或有章外情况发生使合阿展行受到E测。这时慧要做的就是要对合同的签定和前期展行情况做一个书面总结</p>
<!--        <button>查看详情</button>-->
      </div>
      <div class="dowm" v-animate="'queue-bottom'">
        <img src="../assets/images/aboutTwo/pic3.png" alt="">
        <h4>在线仲裁的发展历程</h4>
        <p>网络忡裁也就是互联网忡表已逐渐走入金融企业货后管理时代。网络仲裁也就是互联网仲裁已逐潮走入金</p>
<!--        <button>查看详情</button>-->
      </div>
    </div>
    <div class="right">
      <div class="up" v-animate="'queue-bottom'">
<!--        <img :src="require('D:\\Work\\dzqz_website\\src\\assets\\images\\1.jpg')" alt=""/>-->
        <img src="@/assets/images/aboutTwo/pic2.png" alt="">
        <h4>智能风控系统,有效控制贷款风险</h4>

        <p>于汽车担保业务，是指购车者选择好车型，向经销商提交个人信息和货款申请，经销转给担保机构和银行审核:经批准后，购车人中请银行</p>
<!--        <button>查看详情</button>-->
      </div>
      <div class="dowm" v-animate="'queue-bottom'">
        <div>
          <h4>怎样避免劳动合回纠纷</h4>
          <p>买房也是人一辈子中的一件大事了，有些人穷具一生才能买到一会房，所以在购买房屋的时候一定要注意一下几点。避免出现合同纠纷!</p>
        </div>
      </div>
    </div>
  </div>
  <div class="news">
      <h1>公司新闻</h1>
      <span class="border"></span>
      <p style="font-size: 24px;">专业区块链司法服务平台</p>
      <ul>
        <li v-for="(item,index) in newsList" :key="index" v-animate="'queue-bottom'">
          <img :src="item.newImg" alt="">
          <p>{{item.newTitle}}</p>
          <span>{{item.newTimer}}</span>
        </li>
      </ul>
  </div>
  <div class="deal">
    <h1>百科合同</h1>
    <div class="indeal">
      <div class="img">
        <img src="@/assets/images/aboutTwo/h5.png" alt="">
      </div>
      <div class="title">
        <div>
          <h3>哈希和电子签名</h3>
          <p style="width: 310px;">区块链背后的技术其实主要就是加密算法，其中主要 包含两块，一个是哈希，另一个就是电子签名。</p>
        </div>
<!--        <div>-->
<!--          <button>查看详情</button>-->
<!--        </div>-->

      </div>
    </div>


  </div>
</div>
</template>

<script>
export default {
    name:"about2",
    data() {
      return {
        newsList:[
          {
            newImg:require("@/assets/images/aboutTwo/h1.png"),
            newTitle:"济南运营中心签约业功",
            newTimer:'2021-20-29'
          },
          {
            newImg:require("@/assets/images/aboutTwo/h2.png"),
            newTitle:"石家庄运营中心开业大吉",
            newTimer:'2021-20-29'
          },
          {
            newImg:require("@/assets/images/aboutTwo/h3.png"),
            newTitle:"张家口运营中心签约成功",
            newTimer:'2021-20-25'
          },
          {
            newImg:require("@/assets/images/aboutTwo/h4.png"),
            newTitle:"长春运营中心签约成功",
            newTimer:'2021-20-19'
          }
        ],
      };
    },
}
</script>
<style lang="less" scoped>
.container{
  width: 80%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: left;
.left{
  width: 412px;
  height: 100%;
  .up{
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    position: relative;
    background: #E8E8E8;
    img{
      width: 100%;
      height: 220px;
    }
    h4{
      margin: 40px 0 20px 0;


    }
    p{
     margin-bottom: 40px;
      padding:20px 41px;
    }
  }
  .dowm{
    height: 100%;
    margin-top: 21px;
    padding: 41px 39px 70px 41px;
    background:url(../assets/images/aboutTwo/pic4.png)0 0 no-repeat;
    background-size: cover;
    color: #FFFFFF;
    h4{
      width: 100%;
      padding-left: 0;
    }

  }
}
.center{
  margin: 0 34px;
  width: 412px;
  p{
    padding: 0 41px ;
  }
  .up{
    position: relative;
    background: #E8E8E8;
    padding: 23px 0px 80px 0px;


  }
  .dowm{
    position: relative;
    margin-top: 21px;
    background: #E8E8E8;
    padding-bottom: 88px;
    img{
      width: 100%;
      height: 260px;
    }

  }
}
.right{

    width: 412px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  .up{
    padding-bottom: 60px;
    position: relative;
    height: 490px;
    background: #E8E8E8;
    img{
      width: 100%;
      height: 220px;
    }

    p{
      padding:0 41px 51px 41px;
    }
  }
  .dowm{
    padding: 10px 0;
    background-image:url(../assets/images/aboutTwo/pic5.png);
    background-size: cover;
    color: #FFFFFF;

    p{
      padding:0 41px 41px 41px;
    }
  }

}
  h4{
    font-size: 24px;
    padding:0 41px ;
  }

  button{
  width: 147px;
  height: 42px;
  background: #1DD2AF;
  border-radius: 21px;
  position:absolute;
  left: 40px;
  bottom: 24px;
  border: none;
  color: #E8E8E8;
  font-size: 20px;
}
}
.news{
  width: 100%;
  height: 614px;
  box-sizing: border-box;
  background: url("../assets/images/aboutTwo/pic6.png");
  padding-top: 98px;
  margin-top: 80px;
  color: #FFFFFF;
    h1{
    font-size: 34px;
    font-weight: 400;
    line-height: 32px;
  }
  .border{
    display: inline-block;
    width: 67px;
    height: 2px;
    background: #FFFFFF;
  }
  p{
    // font-size: 24px;
    line-height: 28px;
    margin-bottom: 30px;
  }
  ul{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    li{
      margin: 0 24px;
      text-align: left;
      img{
        width: 290px;
        height: 183px;
        border-radius: 10px;
      }
      p{
        line-height: 25px;
        text-align: left;
        margin: 10px 0;
      }
    }
  }
  }

  p{
    font-size: 18px;
  }

.deal{
  width: 1317px;
  height: 100%;
  padding-bottom: 80px;
  background: #FFFFFF;
  border: 2px solid #1DD2AF;
  box-shadow: 0px 24px 32px 0px rgba(105,105,105,0.1200);
  border-radius: 10px;
  margin: .4583rem auto;
  .indeal{
    display: flex;
    .img{
      margin-left: 96px;

      img{
        width: 292px;
        height: 202px;
      }
  }
    .title{
      width: 692px;
      text-align: left;
      margin-left: 100px;
      display: flex;
      justify-content: space-around;
      flex-direction: row;
      align-items: flex-end;
        button{
            width: 147px;
            height: 42px;
            background: #1DD2AF;
            border-radius: 21px;
            border: none;
            color: #E8E8E8;
            font-size: 20px;
      }
    }
  }

}
.borderLine{
  display: inline-block;
  width: 67px;
  height: 2px;
  background: #1DD2AF;
  margin-bottom: 40px;
}
</style>
